<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PPTX Exporter - 简单测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        background: #f5f5f5;
      }
      .container {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      h1 {
        color: #333;
        text-align: center;
      }
      button {
        background: #007cba;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background: #005a87;
      }
      .result {
        margin: 20px 0;
        padding: 15px;
        border-radius: 5px;
        background: #f0f8ff;
        border-left: 4px solid #007cba;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🎯 PPTX Exporter 简单测试</h1>

      <p>这是一个简单的测试页面，验证PPTX Exporter在浏览器中的基本功能。</p>

      <button onclick="testBasicExport()">📄 测试基本导出</button>
      <button onclick="testCompressedExport()">🗜️ 测试压缩导出</button>
      <button onclick="testPreview()">👁️ 测试预览</button>

      <div id="result" class="result" style="display: none"></div>
    </div>

    <!-- 引入PPTX Exporter UMD文件 -->
    <script src="../dist/browser/pptx-exporter.umd.js"></script>

    <script>
      // 简单的测试数据
      const testData = {
        title: '浏览器测试演示文稿',
        width: 960,
        height: 540,
        theme: {
          backgroundColor: '#ffffff',
        },
        slides: [
          {
            elements: [
              {
                id: 'text-1',
                type: 'text',
                left: 80,
                top: 200,
                width: 800,
                height: 100,
                rotate: 0,
                content:
                  '<div style="font-size: 28px; font-weight: bold; color: #007cba; text-align: center;">🎉 PPTX Exporter 浏览器测试成功！</div>',
                defaultFontName: '微软雅黑',
                defaultColor: '#007cba',
              },
              {
                id: 'text-2',
                type: 'text',
                left: 80,
                top: 320,
                width: 800,
                height: 50,
                rotate: 0,
                content:
                  '<div style="font-size: 16px; color: #666666; text-align: center;">这个PPTX文件是在浏览器中生成的</div>',
                defaultFontName: '微软雅黑',
                defaultColor: '#666666',
              },
            ],
          },
        ],
      };

      function showResult(message, isSuccess = true) {
        const resultDiv = document.getElementById('result');
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = (isSuccess ? '✅ ' : '❌ ') + message;
        resultDiv.style.borderLeftColor = isSuccess ? '#28a745' : '#dc3545';
        resultDiv.style.backgroundColor = isSuccess ? '#d4edda' : '#f8d7da';
      }

      async function testBasicExport() {
        try {
          showResult('正在生成PPTX文件...', true);

          // 检查PPTXExporter是否可用
          if (typeof PPTXExporter === 'undefined') {
            throw new Error('PPTXExporter 未正确加载');
          }

          // 创建导出器
          const exporter = new PPTXExporter(testData);

          // 检查环境
          console.log('环境检测:', exporter.getEnvironment());
          console.log('支持格式:', exporter.getSupportedFormats());

          // 导出并下载
          await exporter.downloadFile('browser-test-basic.pptx');

          showResult('基本导出测试成功！文件已下载。', true);
        } catch (error) {
          console.error('导出失败:', error);
          showResult('基本导出测试失败: ' + error.message, false);
        }
      }

      async function testCompressedExport() {
        try {
          showResult('正在生成压缩PPTX文件...', true);

          const exporter = new PPTXExporter(testData);
          await exporter.downloadFile('browser-test-compressed.pptx', true);

          showResult('压缩导出测试成功！文件已下载。', true);
        } catch (error) {
          console.error('压缩导出失败:', error);
          showResult('压缩导出测试失败: ' + error.message, false);
        }
      }

      async function testPreview() {
        try {
          showResult('正在生成预览...', true);

          const exporter = new PPTXExporter(testData);
          await exporter.openInNewTab();

          showResult('预览测试成功！已在新标签页打开。', true);
        } catch (error) {
          console.error('预览失败:', error);
          showResult('预览测试失败: ' + error.message, false);
        }
      }

      // 页面加载时进行环境检测
      window.addEventListener('load', function () {
        if (typeof PPTXExporter !== 'undefined') {
          console.log('🎉 PPTXExporter 已成功加载到浏览器环境');
          console.log('版本:', PPTXExporter.version || '1.0.0');

          // 测试创建实例
          try {
            const testExporter = new PPTXExporter(testData);
            console.log('✅ 实例创建成功');
            console.log('当前环境:', testExporter.getEnvironment());
            console.log('支持的导出格式:', testExporter.getSupportedFormats());
          } catch (error) {
            console.error('❌ 实例创建失败:', error);
          }
        } else {
          console.error('❌ PPTXExporter 未加载');
          showResult('PPTXExporter 未正确加载，请检查文件路径', false);
        }
      });
    </script>
  </body>
</html>
